<template>
  <div class="body">
    <header class="header">
      <div class="title">
        <router-link to="/index">
          <img src="../../assets/images/01_11.png" alt="" class="img_zuo" />
        </router-link>
        <div>上传图片和视频</div>
      </div>
    </header>
    <ul class="img-box img_upload">
      <div class="img-item radius-m" @click="showPop"></div>
    </ul>
    <ul class="img-box imgs_ul" v-show="list_img.length>0">
      <li class="img-item radius-m img-list" :class="{'show-desc':obj.showDesc}" v-for="(obj,i) of list_img"
        :key="i">
        <div class="img-content">
          <img class="img-src img_tu" :src="show_path + obj.path" />
          <div class="img-group">
            <div class="img-btn">
              <div class="del-btn" @click.stop="del(i,'img')">X</div>
            </div>
            <div class="img-btn">
              <div class="desc-btn" @click.stop="showDesc(i)">A</div>
            </div>
          </div>
        </div>
        <input class="img-desc" type="text" :style="i === number ? 'display: block;' : ''" @click.stop="stopMP"
          placeholder="请输入描述" v-model="imgText[i]" />
      </li>
    </ul>
    <ul class="video-list" v-for="(obj,i) of list_mv">
      <video controls>
        <source :src="show_path+obj.path" type="video/mp4">
        <source :src="show_path+obj.path" type="video/ogg">
        您的浏览器不支持Video标签。
      </video>
      <div class="del" @click.stop="del(i,'mv')"><img src="../../assets/images/delete.png" /></div>
    </ul>
    <van-popup v-model="btm_show" position="bottom">
      <div v-if="terminal === true" class="btm_tk_item" @click="sp">上传视频</div>
      <div class="btm_tk_item" @click="pz">拍照</div>
      <div class="btm_tk_item btm_tk_item-end" @click="xc">从手机相册选择</div>
      <div class="btm_tk_cancle" @click="btm_show = false">取消</div>
    </van-popup>

  </div>
</template>

<script>
import upload from "../../assets/js/upload_vue.js"
import { Toast } from "vant";
import terminal from "../../assets/js/terminal";
export default {
  name: 'upload_demo',
  data() {
    return {
      list_img: [],//图片列表
      list_mv: [],
      imgText:[],
      userId:null,
      show_path:null,
      btm_show:false,
      terminal: false
    };
  },
  components: {
    [Toast.name]: Toast
  },
  beforeCreate() {
    document.addEventListener("plusready", this.plusReady, false);
  },
  destroyed() {
      setTimeout( () => {
        this.$zoom.showImagesFn.hideContainer();
      })
    },
  mounted() {
    this.userId = localStorage.getItem("userId"); //用户id
    this.show_path = this.$global_msg.Url.hosts + '';
    this.terminal = terminal.terminals().android;
  },
  methods: {
    plusReady: function() {
      this.$refs.mapPos.plusReady();
    },
    updata_img(ly_file, second) {
      let that = this;
      plus.nativeUI.showWaiting("正在加载");
      let task = plus.uploader.createUpload(
        that.$global_msg.Url.host + '/partroInspection/uploadFiles',
        {
          method: "POST"
        },
        function (t, status) {
          // 上传完成
          let res = JSON.parse(t.responseText);
          if (status == 200) {
            plus.nativeUI.closeWaiting();
            if (res.code === 200) {
              that.$router.push("/hard_work");
            } else {
              Toast('上传失败！')
            }
          }
        }
      );
      let a = ''
      that.list_img.map(res => {
        a += ',' + res.imgs
      })
      let c = a.substring(1)
      task.addFile(ly_file, {
        key: "multipartFile"
      }); //上传的录音文件
      task.addData("imgurl", c + ""); //3.27_this改为this
      task.addData("videourl", that.list_mv.toString() + "");
      task.addData("title", that.txtbxnr + "");
      task.addData("patrolTroubleshootInfoId", Number(that.id) + "");
      task.addData("patrolTroubleshoot", that.patrolId + "");
      task.addData("yhlb", that.hidden + "");
      task.addData("contractime", second + "");
      task.addData("isUpdate", that.isNo + "");
      task.addData("imgText", that.imgText.toString());
      task.start();
    },
    stopMP() {
    },
    //  下拉框显示
    showPop() {
      this.btm_show = true
    },
    pz() {//拍照
      var _this = this;
      _this.btm_show = false;
      upload.paizhao(function (path) {
        console.log(path);
        _this.uploadImg(path);
      }, function (msg) {
        _this.$toast(msg);
      });
    },
    xc() {//相册
      var _this = this;
      _this.btm_show = false;
      upload.xiangce('image', true, function (path) {
        console.log(path);
        path.map(res => {
          _this.uploadImg(res);
        })
      }, function (msg) {
        _this.$toast(msg);
      });
    },
    sp() {//视频
      var _this = this;
      _this.btm_show = false;
      upload.xiangce('video', false, function (path) {
        console.log(path);

        //获取视频信息
        plus.io.getVideoInfo({
          filePath:path,
          success:function(data){
            console.log(data);
            console.log(data.duration)
            //视频时间15秒以内才上传
            if((data.duration*1)>15){
              _this.$toast('上传的视频时间请在15秒以内');
              return;
            }else{
              _this.uploadVideo(path);
            }
          },
          fail:function(e){
            _this.$toast(e.msg);
          }
        });

      }, function (msg) {
        _this.$toast(msg);
      });
    },
    uploadImg(path) {//上传图片
      var _this = this;
      try {
        plus.nativeUI.showWaiting("正在加载...");
      } catch (e) {
        console.log(e.message);
      }
      var params = {};
      upload.uploadImg(_this.$global_msg.Url.hosts + '/partroInspection/uploadImg', 'POST', params, path, 'multipartFile', function (data) {
        if (data.code == 200) {
          _this.list_img.push({
            path: data.rows
          })
        } else {
          _this.$toast(data.msg);
        }
        try {
          plus.nativeUI.closeWaiting();
        } catch (e) {
          console.log(e.message);
        }
      }, function (msg) {
        _this.$toast(msg);
        try {
          plus.nativeUI.closeWaiting();
        } catch (e) {
          console.log(e.message);
        }
      });
    },
    uploadVideo(path) {//上传视频
      var _this = this;
      try {
        plus.nativeUI.showWaiting("正在加载...");
      } catch (e) {
        console.log(e.message);
      }
      var params = {};
      upload.uploadVideo(_this.$global_msg.Url.hosts + '/partroInspection/uploadMV', 'POST', params, path, 'multipartFile', function (data) {
        data = JSON.parse(data);
        if (data.code == 200) {
          _this.list_mv.push({
            path:data.rows
          });
        } else {
          console.log(data);
          _this.$toast(data.msg);
        }

        try {
          plus.nativeUI.closeWaiting();
        } catch (e) {
          console.log(e.message);
        }
      }, function (msg) {
        _this.$toast(msg);
        try {
          plus.nativeUI.closeWaiting();
        } catch (e) {
          console.log(e.message);
        }
      });
    },
    showDesc(i) {//显示图片描述
      this.list_img[i].showDesc = !this.list_img[i].showDesc;
      this.$forceUpdate();
    },
    del(i, type) {//删除图片
      if (type == 'img') {
        if (this.list_img[i].id) {//不是新上传的图片
          this.list_img.splice(i, 1);
        } else {
          this.list_img.splice(i, 1);
        }
      } else {
        if (this.list_mv[i].id) {//不是新上传的视频
          this.list_mv.splice(i, 1);
        } else {
          this.list_mv.splice(i, 1);
        }
      }
    },
  }
}
</script>

<style scoped>
  .header {
    height: 1.8519rem;
    background: #007aff;
    padding-top: 0.8333rem;
    box-sizing: border-box;
    z-index: 20;
    font-size: 0.388888rem;
  }
  .title {
    padding: 0 0.3704rem;
    display: flex;
    align-items: center;
    color: #fff;
  }
  .title>div {
    width: 100%;
    font-size: 0.4444rem;
    text-align: center;
  }
  .img_zuo {
    width: 0.2593rem;
    height: 0.463rem;
  }

  .btm_tk_item {
    height: 1.3889rem;
    line-height: 1.3889rem;
    border-bottom: 1Px solid #ddd;
    text-align: center;
    margin-left: 0.185185rem;
    margin-right: 0.185185rem;
    width: auto;
    background-color: #FFFFFF;
  }
  .btm_tk_item:first-child {
    border-radius: 0.148148rem 0.148148rem 0 0;
  }
  .btm_tk_item-end {
    border-radius: 0 0 0.148148rem 0.148148rem;
  }
  .btm_tk_cancle {
    font-weight: bolder;
    height: 1.3889rem;
    line-height: 1.3889rem;
    border-bottom: 1Px solid #ddd;
    text-align: center;
    margin: 0.185185rem;
    width: auto;
    background-color: #FFFFFF;
    border-radius: 0.148148rem;
  }

  /* 图片列表 */
  .img-box {
    margin-left: 0.37037rem;
    margin-right: 0.37037rem;
    margin-top: 0.314814rem;
    width: auto;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
  }
  .img-box .img-item {
    width: 4.481481rem;
    height: 2.851851rem;
    background-image: url('../../assets/images/tianjia.png');
    background-size: 100% 100%;
    margin-bottom: 0.425925rem;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px #CCCCCC solid;
    border-radius: 30px;
  }
  /* 图片列表的内容和按钮 */
  .img-box .img-item .img-content {
    width: 100%;
    height: 2.814814rem;
    z-index: 10;
    background-color: #FFFFFF;
    position: relative;
  }
  .img-box .img-item .img-content .img-src {
    width: 100%;
    height: 100%;
    z-index: 11;
  }
  .img-box .img-item .img-content .img-group {
    width: 1.388888rem;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 12;
    border-left: 1px #FFFFFF solid;
    display: flex;
    flex-direction: column;
  }
  .img-box .img-item .img-content .img-group .img-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px #FFFFFF solid;
  }
  .img-box .img-item .img-content .img-group .img-btn:last-child {
    border-left: none;
  }
  .img-box .del-btn {
    color: #FFFFFF;
    font-size: 0.925925rem;
  }
  .img-box .desc-btn {
    color: #FFFFFF;
    font-size: 0.925925rem;
  }
  /* 图片列表的描述 */
  .img-box .show-desc {
    height: 3.703703rem;
  }
  .img-box .img-item .img-desc {
    width: 100%;
    height: 0.851851rem;
    text-align: center;
    flex: 1;
    background-color: #FFFFFF;
    display: none;
  }
  .img-box .show-desc .img-desc {
    display: block;
  }
  ul, li {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .img-list:first-child {
    margin-left: 4.814814rem;
  }
  .imgs_ul {
    margin-top: -3.255554rem;
    z-index: 2 !important;
  }
  .img_upload .img-item {
    z-index: 3 !important;
  }

</style>
